<template>
  <view class="content help-container">
<!--    <image class="logo" src="@/static/logo.png"></image>
    <view class="text-area">
      <text class="title">Hello RuoYi</text>
    </view> -->
	<canvasView v-if="canvasBool" :canvasBaseData="canvasBaseData"></canvasView>
	<view v-else v-for="(item, findex) in list" :key="findex" :title="item.title" class="childList">
<!-- 	  <view class="text-title">
	    <view :class="item.icon"></view>{{ item.title }}
	  </view> -->
<!-- 	  <view class="text-item">{{ item.title }}</view>
	  <view class="line" v-if="zindex !== item.childList.length - 1"></view> -->
	  <view class="list-cell list-cell-arrow" @click="handleText(item)">
	    <view class="menu-item-box">
			<uni-row class="demo-uni-row" :width="nvueWidth">
								<uni-col :span="16">
									<view>{{ item.deviceName }}</view>
								</uni-col>
								<uni-col :span="6">
									<view class="tag-view">
										<uni-tag :text="getStatusText(item.deviceStatus)" type="primary" />
									</view>
								</uni-col>
							</uni-row>
	    </view>
	  </view>
	</view>
  </view>
</template>

<script>
	import canvasView from './canvas'
	import { getTemplate } from '@/api/login'
	import { getDeviceList } from '@/api/device.js'
  export default {
	  components: {canvasView},
	  data() {
	    return {
	      list: [
        // {
        //     "createBy": "",
        //     "createTime": "2024-05-27 16:44:51",
        //     "updateBy": "",
        //     "updateTime": "2024-05-27 18:47:27",
        //     "remark": null,
        //     "id": 8,
        //     "deviceName": "智能控制终端test1",
        //     "deptId": 204,
        //     "slaveAddress": 1,
        //     "deviceNum": "1",
        //     "deviceStatus": 0,
        //     "deviceDesc": "测试1号",
        //     "locationType": 102,
        //     "addr": null,
        //     "lng": 113.135489,
        //     "lat": 29.363178,
        //     "templatesId": 49,
        //     "gatewayId": 17,
        //     "deptName": "测试部门1号",
        //     "gatewayName": "测试网关1",
        //     "templatesName": "测试模板",
        //     "sn": "00500824031100020212"
        // },{
        //     "createBy": "",
        //     "createTime": "2024-05-27 16:44:51",
        //     "updateBy": "",
        //     "updateTime": "2024-05-27 18:47:27",
        //     "remark": null,
        //     "id": 8,
        //     "deviceName": "智能控制终端test1",
        //     "deptId": 204,
        //     "slaveAddress": 1,
        //     "deviceNum": "1",
        //     "deviceStatus": 0,
        //     "deviceDesc": "测试1号",
        //     "locationType": 102,
        //     "addr": null,
        //     "lng": 113.135489,
        //     "lat": 29.363178,
        //     "templatesId": 49,
        //     "gatewayId": 17,
        //     "deptName": "测试部门1号",
        //     "gatewayName": "测试网关1",
        //     "templatesName": "测试模板",
        //     "sn": "00500824031100020212"
        // },{
        //     "createBy": "",
        //     "createTime": "2024-05-27 16:44:51",
        //     "updateBy": "",
        //     "updateTime": "2024-05-27 18:47:27",
        //     "remark": null,
        //     "id": 8,
        //     "deviceName": "智能控制终端test1",
        //     "deptId": 204,
        //     "slaveAddress": 1,
        //     "deviceNum": "1",
        //     "deviceStatus": 0,
        //     "deviceDesc": "测试1号",
        //     "locationType": 102,
        //     "addr": null,
        //     "lng": 113.135489,
        //     "lat": 29.363178,
        //     "templatesId": 49,
        //     "gatewayId": 17,
        //     "deptName": "测试部门1号",
        //     "gatewayName": "测试网关1",
        //     "templatesName": "测试模板",
        //     "sn": "00500824031100020212"
        // }
		],
			statusMap: {
		        0: '在线',
		        1: '离线',
		        2: '其他'
		        // ... 其他状态
		      },
		
			canvasBool: false,
			canvasBaseData: []
	    }
	  },
    onLoad: function() {
		// this.getDeviceList()
		this.judgment()
    },
	methods: {
		judgment() {
			const userInfo = uni.getStorageSync('userInfo');
			if (userInfo.username =="admin") {
				this.getDeviceList()
			} else {
				getTemplate().then(res => {
					if (res.code == 200 && res.data && res.data.length > 0) {
						this.canvasBool = true
						this.canvasBaseData = res.data
					} else {
						this.canvasBool = false
						this.getDeviceList()
					}
				}).catch(() => {
					this.canvasBool = false
					this.getDeviceList()
				})
			}
		},
	  getStatusText(status) {
	        return this.statusMap[status] || '未知';
	  },
	  handleText(item) {
		let deviceInfo = JSON.stringify(item)
	    this.$tab.navigateTo(`/pages/device/index?deviceInfo=${deviceInfo}`)
	  },
	  // 密码登录
	   async getDeviceList() {
	      getDeviceList().then(res => {
	        this.$modal.closeLoading()
			this.list = res.rows
	      }).catch(() => {
	        uni.showModal({
	        	title: "系统提示",
	        	content: "接口调用失败",
	        	success: function (res) {
					this.getDeviceList()
	        	}
	        })
	      })
	    },
	    // 登录成功后，处理函数
	    loginSuccess(result) {
	      // 设置用户信息
	      this.$store.dispatch('GetInfo').then(res => {
	        this.$tab.reLaunch('/pages/index')
	      })
	    }
	}
  }
</script>

<style>
/*  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  } */

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
  .help-container {
    margin-bottom: 100rpx;
    /* padding: 30rpx; */
  }
  
  .list-title {
    margin-bottom: 30rpx;
  }
  
  .childList {
    background: #ffffff;
    box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
    border-radius: 16rpx;
    margin-top: 10rpx;
  }
  
  .line {
    width: 100%;
    height: 1rpx;
    background-color: #F5F5F5;
  }
  
  .text-title {
    color: #303133;
    font-size: 32rpx;
    font-weight: bold;
    margin-left: 10rpx;
  
/*    .iconfont {
      font-size: 16px;
      margin-right: 10rpx;
    } */
  }
  
  .text-item {
    font-size: 28rpx;
    padding: 24rpx;
  }
  
  .question {
    color: #606266;
    font-size: 28rpx;
  }
  
</style>

